<template>
	<view class="app">
		<load :ready="ready"></load>
		
		<view class="navtop">
		    <u-navbar title="订单详情" back-icon-color="#fff"  :background="{
		        background:'#0093dd'
		    }" :border-bottom="false" title-color="#fff"  ></u-navbar>
		</view>
		<template v-if="info">
			<view class="order-warp">
				
				<view class="state">
					<image src="/static/icon_state2.png" mode="widthFix" class="icon"></image>
					<text>{{order_status[info.orderMsg.order_status]}}</text>
				</view>
				
				
				<view class="addres-wrap">
					
					<image src="/static/icon_add.png" mode="widthFix" class="icon-add"></image>
					<view class="info">
						<view class="addhead">
							<text class="name">{{info.address.name}}</text>
							<text class="mobile" @click="handleTel(info.address.mobile)">{{info.address.mobile}}</text>
						</view>
						<view class="text">{{info.address.address}}</view>
						<view style="padding: 5px 0 0;">
							<u-button size="mini" type="success" @click="navigation()">
								<u-icon name="map" size="26"></u-icon>
								导航
							</u-button>
						</view>
					</view>
					
				</view>
			</view>
			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_box.png" mode="widthFix" class="icon"></image>
					<text>商品信息</text>
				</view>
				
				<view class="goods-list">
					<view class="goods-item" v-for="(item, index) in info.goods">
						<u-image :src="item.image" border-radius="16" width="128" height="128"></u-image>
						<view class="info">
							<view class="goods-name txt-hide">{{item.goods_name}}</view>
							<view class="attrbox">
								{{item.description}}
							</view>
							<view class="desc">
								<view class="price">¥<text style="margin-left: 4px;">{{item.goods_price}}</text></view>
								<text class="num">x{{item.goods_num}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_wallet.png" mode="widthFix" class="icon"></image>
					<text>付款信息</text>
				</view>
				
				<view class="desc-text">
					<view class="label">订单类型</view>
					<view class="value">
						{{info.orderMsg.displace_or_add == 1 ? '共享瓶订气' : '新增共享瓶'}}
					</view>
				</view>
				
				<view class="desc-text">
					<view class="label">共享瓶押金</view>
					<view class="value">¥{{info.orderMsg.bottle_deposit}}</view>
				</view>
				
				<!-- <view class="desc-text" @click="showRent=true"> -->
				<view class="desc-text">
					<view class="label">
						共享瓶租金
						<!-- <u-icon size="28" name="info-circle"></u-icon> -->
					</view>
					<!-- <view class="value">¥<text>{{bottle_rent}}</text></view> -->
					<view class="value">¥<text>{{info.orderMsg.rent}}</text></view>
					
				</view>
				<!-- <view class="desc-text">
					<view class="label">待缴共享瓶租金</view>
					<view style="text-align: right; font-size: 24rpx; color: #999;">
						<view class="value"><u-icon size="28" name="info-circle"></u-icon> ¥<text>{{bottle_rent}}</text>一个月，半年结算一次</view>
					</view>
				</view> -->
				<!-- <view class="desc-text">
					<view class="label">共享瓶租金</view>
					<view style="text-align: right; font-size: 24rpx; color: #999;">
						<view class="value"><u-icon size="28" name="info-circle"></u-icon> ¥<text>{{bottle_rent}}</text>一个月，半年结算一次</view>
					</view>
				</view> -->
				<view class="desc-text">
					<view class="label">楼层费用</view>
					<view class="value">¥{{info.orderMsg.floor_amount}}</view>
				</view>
				<view class="desc-text">
					<view class="label">气价</view>
					<view class="value">¥{{info.orderMsg.bottle_amount}}</view>
				</view>
				<view class="desc-text">
					<view class="label">商品增购</view>
					<view class="value">¥{{info.orderMsg.additionalPrice}}</view>
				</view>
				<view class="desc-text">
					<view class="label">实际付款金额</view>
					<view class="value">¥{{info.orderMsg.order_amount}}</view>
				</view>
				
				<view class="desc-text">
					<view class="label">订单备注</view>
					<view class="value">{{info.orderMsg.user_remark}}</view>
				</view>
				<u-gap height="20"></u-gap>
			</view>
			
			
			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_invoice.png" mode="widthFix" class="icon"></image>
					<text>订单信息</text>
				</view>
				
				<view class="desc-text">
					<view class="label">订单编号</view>
					<view class="value">{{info.orderMsg.order_sn}}</view>
				</view>
				<view class="desc-text">
					<view class="label">是否需要旧瓶回收服务</view>
					<view class="value">{{info.orderMsg.is_recovery ? '是' : '否'}}</view>
					
				</view>
				
				<view class="desc-text">
					<view class="label">下单时间</view>
					<view class="value">{{info.orderMsg.create_time}}</view>
				</view>
				
				<view class="desc-text" v-if="info.orderMsg.pay_time">
					<view class="label">付款时间</view>
					<view class="value">{{info.orderMsg.pay_time}}</view>
				</view>
				
				<view class="desc-text" v-if="info.orderMsg.shippine_time">
					<view class="label">送达时间</view>
					<view class="value">{{info.orderMsg.shippine_time}}</view>
				</view>
				
				<view class="desc-text" v-if="info.orderMsg.complete_time">
					<view class="label">成交时间</view>
					<view class="value">{{info.orderMsg.complete_time}}</view>
				</view>
				
				<view class="desc-text" v-if="info.orderMsg.bottle_send">
					<view class="label">送瓶条码</view>
					<view class="value">{{info.orderMsg.bottle_send}}</view>
				</view>
				
				<view class="desc-text" v-if="info.orderMsg.bottle_put">
					<view class="label">取瓶条码</view>
					<view class="value">{{info.orderMsg.bottle_put}}</view>
				</view>
				<u-gap height="20"></u-gap>
			</view>


			<view class="ibox" v-if="info.orderMsg && info.orderMsg.order_status == 2">
				<view class="titlebox">
					<image src="/static/icon_invoice.png" mode="widthFix" class="icon"></image>
					<text>配送员信息</text>
				</view>
				
				<view class="desc-text">
					<view class="label">姓名</view>
					<view class="value">{{info.driMsg.name}}</view>
				</view>
				<view class="desc-text">
					<view class="label">手机号</view>
					<view class="value">{{info.driMsg.mobile}}</view>
				</view>
				<view class="desc-text">
					<view class="label">所属站点</view>
					<view class="value">{{info.driMsg.site_name}}</view>
				</view>
				<u-gap height="20"></u-gap>
			</view>



			<view style="height: 120rpx;"></view>
			<view class="order-foot">
				
				
				
			<!-- 	<u-button class="btn" hover-class="none" type="success" @click="link(`./logistics?id=${id}`)"
					:custom-style="{
							...btnStyle,
							backgroundColor: '#ffaa00',
						}" size="medium">钢瓶流转信息</u-button> -->
						
						
				<u-button class="btn" type="primary" v-if="info.orderMsg.order_status == 1" @click="showSended=true" :custom-style="btnStyle"
					size="medium">确认送到</u-button>
					
			</view>
			
			

<!-- 			<u-modal v-model="showSended" :show-confirm-button="true" :show-cancel-button="true" confirm-text="确认"
				@confirm="confirmSended()" content="是否确定送达？"></u-modal> -->
				
				
				<u-popup v-model="showSended" mode="bottom"  height="800"  border-radius="32">
					<view class="send-popup">
						<view class="btn-close">
							<u-icon name="close" @click="showSended = false" size="30"></u-icon>
						</view>
						<view class="title">
							确认送到
						</view>
						<view class="item">
							<view class="name">送瓶编号 <text class="num">{{form.numList1.length}}/{{total}}</text></view>
							<view class="info" :class="[{
								gray:form.numList1.length == total
							}]">
								<u-icon name="scan" size="36" color="#666" @click="handleScan('num1')"></u-icon>
								<view class="int">
									<u-input  v-model="form.num1" :disabled="form.numList1.length == total" type="text"  placeholder="请输入" />
								</view>
								<view class="btn" @click="handleAdd('num1')">
									添加
								</view>	
							</view>
						</view>
						<view class="tag-wrap">
							<view class="tag" v-for="(item, index) in form.numList1" >
								<u-tag :text="item" :closeable="true" @close="onClose(index,form.numList1)" type="info " />
							 <!-- @click="handleTag(item,index)" -->
							</view>	
						</view>
						
						<view class="item">
							<view class="name">
								取瓶编号
								<text class="num"  v-if="info.orderMsg.displace_or_add == 1">{{form.numList2.length}}/{{total}}</text>
								</view>
							<view class="info" :class="[{
								gray:form.numList2.length == total
							}]" v-if="info.orderMsg.displace_or_add == 1">
								<u-icon name="scan" size="36" color="#666" @click="handleScan('num2')"></u-icon>
								<view class="int">
									<u-input  v-model="form.num2" :disabled="form.numList2.length == total" type="text"  placeholder="请输入" />
								</view>
								<view class="btn" @click="handleAdd('num2')">
									添加
								</view>	
							</view>
							<view class="info gray" v-else>
								<u-icon name="scan" size="36" color="#999" ></u-icon>
								<view class="int">
									<u-input disabled  v-model="form.num2"  type="text"  placeholder="请输入" />
								</view>
								<view class="btn">
									添加
								</view>	
							</view>
						</view>
						
						<view class="tag-wrap">
							<view class="tag" v-for="(item, index) in form.numList2" >
								<u-tag :text="item" :closeable="true" @close="onClose(index,form.numList2)" type="info " />
								<!-- @click="handleTag(item,index)" -->
							
							</view>	
						</view>
						
						<view class="btnbox">
							<u-button type="primary" shape="circle" @click="confirmSended()" :custom-style="btnStyle">提交</u-button>
						</view>
					</view>
				</u-popup>
				
		</template>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {},
		data() {
			return {
				ready: false,
				showSended: false,
				showDelivery: false,
				showSend: false,
				current: 0,
				tab: 0,
				btnStyle: {
					background: '#0093dd',
					padding: '0 15px',
					marginLeft: '5px'
				},
				id: null,
				info: null,
				showRemark: false,
				logForm: {
					shipId: '',
					shipSn: '',
				},
				orderRemark: '',
				showShip: false,
				order_status: {
					0: '待支付',
					1: '待配送',
					2: '已完成',
				},
				bottle_rent: 0,
				
				logistics:[{
					value:1,
					name:'钢瓶出库'
				},{
					value:2,
					name:'钢瓶入库',
				}],
				form:{
					num1:'',
					num2:'',
					numList1:[],
					numList2:[],
				},
				total:0,
			};
		},
		onLoad(o) {
			that = this;
			if (o.id) {
				this.id = o.id
				// this.getLogCompany();
			}
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.src = '/static/mp3/err.mp3';
			this.innerAudioContext.onPlay(() => {
			  console.log('开始播放');
			});
		},
		onReady() {},
		onShow() {
			this.getInit();
		},
		onUnload() {
			that = null;
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			handleTel(number){
				uni.makePhoneCall({
					phoneNumber:''+number
				})
			},
			onClose(index, list){
				console.log(index)
				list.splice(index, 1)
			},
			handleScan(name){
				const that = this;
				
				if(name=='num1' && this.form.numList1.length == this.total ){
					this.$common.showTip('已达到最大瓶数');
					this.innerAudioContext.play();
					return
				}
				if(name=='num2' && this.form.numList2.length == this.total ){
					this.$common.showTip('已达到最大瓶数');
					this.innerAudioContext.play();
					return
				}
				
				
				
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						
						if(res.result.length != 6){
							that.innerAudioContext.play();
							return
						}
						if(name=='num1'){
							if(that.isHas(res.result) == -1 ){
								that.form.numList1.push(res.result)
							} else{
								that.innerAudioContext.play();
								that.$common.showTip('编码重复');
							}
							
						} else{
							if(that.isHas(res.result) == -1 ){
								that.form.numList2.push(res.result)
							} else{
								that.innerAudioContext.play();
								that.$common.showTip('编码重复');
							}
						}
						// that.$set(that.form, name, res.result)
					},
					fail(err){
						console.log(err)
						that.$common.showTip(err.errMsg);
					},
				});
				
				// form:{
				// 	num1:'',
				// 	num2:'',
				// 	numList1:[],
				// 	numList2:[],
				// },
			},
			handleAdd(name){
				
				if(name=='num1' && this.form.numList1.length >= this.total ){
					this.$common.showTip('已达到最大瓶数');
					this.innerAudioContext.play();
					return
				}
				if(name=='num2' && this.form.numList2.length >=  this.total ){
					this.$common.showTip('已达到最大瓶数');
					this.innerAudioContext.play();
					return
				}
				
				if(this.form[name].length != 6){
					this.$common.showTip('编码数错误')
					this.innerAudioContext.play();
					return
				}
				if(name == 'num1'){
					console.log('this.isHas(this.form.num1)', this.isHas(this.form.num1))
					if(this.isHas(this.form.num1) == -1 ){
						this.form.numList1.push(this.form.num1 )
						this.form.num1 = '';
					} else{
						that.innerAudioContext.play();
						that.$common.showTip('编码重复');
					}
				} else{
					if(this.isHas(this.form.num2) == -1 ){
						this.form.numList2.push(this.form.num2 )
						this.form.num2 = '';
					} else{
						that.innerAudioContext.play();
						that.$common.showTip('编码重复');
					}
				}
			},
			
			isHas(data ){
				return [...this.form.numList1,...this.form.numList2].findIndex(item=>{
					return item == data
				})
			},
			submitInput(){
				this.form.bottle_code[this.tagIndex] = this.value
				this.value = '';
				this.showEdit = false;
			},
			handleTag(e, index){
				this.value = e;
				this.tagIndex= index;
				this.showEdit = true;
			},
			navigation(){
				if(!this.info.address.latitude){
					this.$common.showTip('经纬度为空')
					return
				}
				let lat = this.info.address.latitude.split(',')
				console.log(lat)
			    this.$common.navigation({
					name: this.info.address.address,
					lat: lat[0],
					lng:  lat[1],
				})
			},
			logSelect(e) {
				this.$set(this.logForm, 'ship', e[0].label)
				this.$set(this.logForm, 'shipId', e[0].value)
			},
			//确认送达
			async confirmSended() {
				if(!this.form.numList1.length){
					this.$common.showTip('送瓶码不可为空')
					return
				}
				uni.showLoading();
				let res = await this.$api.smService({
					orderId: this.id,
					order_id: this.id,
					bottle_send: this.form.numList1, //送瓶编号
					bottle_put: this.form.numList2,//收瓶编号
				});
				uni.hideLoading();
				if (res.data.code == this.$config.RESOK) {
					// this.$common.showTip(res.data.msg);
					this.showSended = false;
					this.$common.showTip('配送成功');
					this.getInit()
				} else {
					this.$message.error(res.data.msg);
				}
			},
			//确认开始配送
			async confirmSend() {
				uni.showLoading();
				let res = await this.$api.confirmDelivery({
					orderId: this.id
				});
				uni.hideLoading();
				if (res.data.code == this.$config.RESOK) {
					// this.$common.showTip(res.data.msg);
					this.$common.showTip('配送成功');
					this.getInit()
				} else {
					this.$message.error(res.data.msg);
				}
			},
			//订单备注
			async submitRemark() {
				if (!this.orderRemark.length) {
					this.$common.showTip('请输入备注')
					return
				}
				uni.showLoading();
				let res = await this.$api.submitRemark({
					orderId: this.id,
					orderRemark: this.orderRemark,
				});
				uni.hideLoading();
				if (res.data.code == this.$config.RESOK) {
					// this.$common.showTip(res.data.msg);
					this.$common.showTip('保存成功');
					this.getInit()
					this.showRemark = false;
				} else {
					this.$message.error(res.data.msg);
				}
			},
			async getLogCompany() {
				let res = await this.$api.logCompany();
				if (res.data.code == this.$config.RESOK) {
					this.logistics = res.data.data.map(item => {
						return {
							name: item.dictLabel,
							value: item.dictValue,
							label: item.dictLabel,
							id: item.dictValue,
						}
					})
				} else {
					this.$message.error(res.data.msg);
				}
			},
			async getInit() {
				let res = await this.$api.orderDetail({
					order_id: this.id
				});
				// let resRent = await this.$api.showConfig({
				// 	type: 'pay',
				// 	name: 'bottle_rent'
				// });
				if (res.data.code == this.$config.RESOK) {
					let info = res.data.data;
					let total = 0;
					info.goods.forEach(item=>{
						if(item.type == 1){
							total += item.goods_num
						}
					})
					this.total = total;
					this.info = info;
					this.ready = true;
				} else {
					this.$message.error(res.data.msg);
				}
				// if (resRent.data.code == this.$config.RESOK) {
				// 	this.bottle_rent = resRent.data.data
				// }
			},
			radioGroupChange() {

			},
			radioChange() {

			},
			handleTab(e) {
				this.tab = e;
			},
			change(e) {
				this.current = e;
			},
			submit() {
				console.log('submit')
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			...mapActions([])
		},
		computed: {
			...mapState({
				userInfo: 'userInfo'
			})
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #F8FAFD;
	}

	.order-warp {
		background: #0093dd;
		padding: 24rpx 32rpx;

		.state {
			display: flex;
			color: #fff;
			align-items: center;

			.icon {
				width: 28px;
				height: 28px;
			}

			text {
				margin-left: 6px;
				font-size: 20px;
			}
		}

		.addres-wrap {
			margin-top: 40rpx;
			background: #fff;
			border-radius: 12px;
			display: flex;
			justify-content: space-between;
			padding: 30rpx 32rpx;

			.icon-add {
				width: 18px;
				height: 18px;
			}

			.info {
				flex: 1;
				padding-left: 20rpx;
			}

			.name {
				margin-right: 12px;
			}

			.addhead {
				margin-bottom: 4px;
			}
			.mobile{
				color: $color;
			}
			.text {
				font-size: 14px;
			}
		}

	}

	.ibox {
		background: #fff;
		margin: 16rpx 32rpx;
		border-radius: 12px;
		padding: 0 32rpx;

		.log-item {
			display: flex;
			align-items: center;
			padding: 4px 0;

			text {
				margin-right: 10px;
			}

			.icon-copy {
				width: 18px;
				height: 18px;
			}
		}
	}

	.titlebox {
		display: flex;
		padding: 28rpx 0;
		align-items: center;

		.icon {
			width: 18px;
			height: 18px;
		}

		text {
			margin-left: 5px;
			font-size: 16px;
		}
	}

	.goods-list {
		border: 0;
	}

	.desc-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #8E8E9A;
		padding: 4px 0;
	}

	.order-foot {
		text-align: right;
		padding: 10rpx 30rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		background-color: #F8FAFD;
	}

	.send-popup {
		padding: 20rpx 30rpx;
		position: relative;
		.btn{
			width: 100rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #55aa7f;
			font-size: 13px;
			text-align: center;
			border-radius: 5px;
			color: #fff;
		}
		.btn-close {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}

		.title {
			text-align: center;
			font-size: 16px;
			margin-bottom: 20rpx;
		}

		.item {
			margin-bottom: 10rpx;
			.name{
				margin-bottom: 4px;
			}
		}

		.label {
			font-size: 14px;
			margin-bottom: 6px;
		}

		.btnbox {
			padding-top: 30rpx;
		}
		.info{
			display: flex;
			border: 1px solid #ddd;
			border-radius: 5px;
			align-items: center;
			padding: 0 0 0 20rpx ;
			&.gray{
				background: #eee;
				.btn{
					background: #999;
				}
			}
		}
		.int{
			padding-left: 10px;
			width: 100%;
		}
	}

	.attrbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		padding: 2px 0;
		color: #666;

		.attr-name {
			width: 80%;
			font-size: 12px;
		}

		.num {}
	}

	.sell {
		padding: 10px 0;
		color: #666;
	}

	.goods-list {
		border-top: 1px solid #eee;
		padding: 10rpx 0;

		.goods-item {
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
		}

		.info {
			flex: 1;
			width: 480rpx;
			padding-left: 20rpx;
		}

		.goods-name {
			line-height: 26px;
			font-size: 14px;
			font-weight: bold;
		}

		.attr {
			font-size: 12px;
			color: #979797;
			margin-bottom: 2px;
		}

		.price {
			font-size: 12px;
			color: $color-red;

			text {
				font-size: 15px;
			}
		}

		.desc {
			display: flex;
			justify-content: space-between;
			padding-top: 20rpx;
		}
	}
	.tag-wrap{
		display: flex;
		flex-wrap: wrap;
		line-height: 1.5;
		margin-bottom: 20rpx;
		min-height: 30px;
		.tag{
			display: inline-block;
			margin-right: 4px;
			margin-bottom: 4px;
		}
	}
</style>